<template>
	<div>
		<el-date-picker clearable v-model="dateValue[0]" type="date" placeholder="开始日期" value-format="yyyy-MM-dd" @change="emitParent(0)"></el-date-picker>
		至
		<el-date-picker clearable v-model="dateValue[1]" type="date" placeholder="结束日期" value-format="yyyy-MM-dd" @change="emitParent(1)"></el-date-picker>
	</div>
</template>

<script>
	import {
	  Message
	} from 'element-ui'
	export default {
		name: 'date-range',
		props: ['value'],
		data() {
			return {
				dateValue: this.value || ['', '']
			}
		},
		watch: {
			value(val){
				this.dateValue = Array.isArray(val)?val:['','']
			}
		},
		methods: {
			emitParent(type) {
				if(this.dateValue[0] && this.dateValue[1] && this.dateValue[0] > this.dateValue[1]){
					Message.error('开始日期不得大于结束日期')
					this.dateValue[parseInt(type)] = ''
					this.$forceUpdate()
				}
				this.$emit('input', this.dateValue);
			}
		}

	}
</script>

<style>
</style>
